<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>供应商管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript" src="/jeesite/static/jquery-tablesorter/jquery.tablesorter.js"></script>
	<link href="/jeesite/static/jquery-tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
	$(document).ready(
			function() {
				$("#btnExport").click(
						function() {
							top.$.jBox.confirm("确认要导出产品数据吗？", "系统提示", function(
									v, h, f) {
								if (v == "ok") {
									$("#searchForm").attr("action","${ctx}/pro/supplier/export");
									$("#searchForm").submit();
								}
							}, {
								buttonsFocus : 1
							});
							top.$('.jbox-body .jbox-icon').css('top', '55px');
						});
				$("#btnImport").click(function() {
					$.jBox($("#importBox").html(), {
						title : "导入数据",
						buttons : {
							"关闭" : true
						},
						bottomText : "导入文件不能超过5M，仅允许导入“xls”或“xlsx”格式文件！"
					});
				});
				//全选
				$("#checkAll").click(function() {
					$('input[name="id"]').attr("checked",this.checked);
				});
				var $subBox = $("input[name='id']");
				$subBox.click(function() {
					$("#checkAll").attr("checked",$subBox.length == $("input[name='id']:checked").length ? true : false);
				});
			});
	function page(n, s) {
		$("#pageNo").val(n);
		$("#pageSize").val(s);
		$("#searchForm").attr("action", "${ctx}/pro/supplier/list");
		$("#searchForm").submit();
		return false;
	}
	
	//删除
	function deleteData() {
		var $id = $("input[name='id']:checked");
		var ids = new Array();
		var j = 0;
		if ($id.val() != null && $id.val() != '') {
			var submit = function (v, h, f) {
			    if (v == 'ok'){
			        $id.each(function(i, info) {
						ids[j] = info.value;
						j++;
					});
			        resetTip();
			        location.href = "${ctx}/pro/supplier/deleteData?ids="+ ids;
			    }else if (v == 'cancel'){
			    	return true;
			    }
			};
			$.jBox.confirm("确认删除此信息吗？", "提示", submit);
		}else{
			jBox.tip("请勾选需要删除的数据！");
		}
	}
	
	//用于分页
	var pageNoOne = "";
	var pageSizeOne = "";
	var countOne = "";
	var cId = "";
	//查看
	function see(obj) {
		cId = $(obj).next().val();
		var newRow = "";
		//获取表格中的数据
		$.getJSON("${ctx}/pro/supplier/see", "id=" + cId,function(data) {
					if (data != null && data.list.length >= 1) {
						$.each(data.list, function(i, info) {
							newRow += '<tr>' 
									+ '<td>' + info.codeNum + '</td>'
									+ '<td>' + info.name + '</td>'
									+ '<td>' + info.phone + '</td>'
									+ '<td>' + info.email + '</td>';
							if(typeof(info.remarks) == "undefined"){
								newRow += '<td></td></tr>';
							}else{
								newRow += '<td>' + info.remarks + '</td></tr>';
							}
						});
						pageNoOne = data.pageNo;
						pageSizeOne = data.pageSize;
						countOne = data.count;
						$("#pageNoOne").val(pageNoOne);
						$("#pageSizeOne").val(pageSizeOne);
						$("#countOne").text(countOne);
						if (pageNoOne >= countOne / pageSizeOne) {
							$("#nextPageLi").attr("class", "disabled");
						}
						if (pageNoOne <= 1) {
							$("#previousPageLi").attr("class",
									"disabled");
						}
					}
					show(newRow,obj);
			});
		}
	
	//显示查看框
	function show(newRow,obj) {
		var html = '<div style="width: 778px;padding: 10px;">'
			+'<div style="border: 1px solid #c8d1d5;padding:7px;margin-bottom: 8px;">'
			+'<table cellpadding="0" cellspacing="0" style="width: 100%;">'
			+'<tr>'
			+'<td style="width: 259.3px;"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">供应商名称</label></td>'
			+'<td style="width: 259.3px;"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">供应商类型</label></td>'
			+'<td style="width: 259.3px;"><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">联系电话</label></td>'
			+'</tr>'
			+'<tr>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(1)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(2)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(3)").html()+'" readonly="readonly"/></td></td>'
			+'</tr>'
			+'<tr>'
			+'</tr>'
			+'<tr>'
			+'<td><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">传真</label></td>'
			+'<td><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">邮箱</label></td>'
			+'<td><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">地址</label></td>'
			+'</tr>'
			+'<tr>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(4)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(5)").html()+'" readonly="readonly"/></td></td>'
			+'<td><input type="text" value="'+$(obj).parent().parent().children("td:eq(6)").html()+'" readonly="readonly"/></td>'
			+'</tr>'
			+'<tr>'
			+'<td ><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">网址</label></td>'
			+'<td ><label class="control-label" style="font-size: 14px; margin-bottom: 3px;">备注</label></td>'
			+'</tr>'
			+'<tr>'
			+'<td ><input type="text" value="'+$(obj).parent().parent().children("td:eq(7)").html()+'"  readonly="readonly"/></td>'
			+'<td ><input type="text" value="'+$(obj).parent().parent().children("td:eq(8)").html()+'"  readonly="readonly"/></td>'
			+'</tr>'
			+'</table></div>'
			+ '<table id="contentTable" class="table table-hover table-bordered">'
			+ '<thead>'
			+ '<tr>'
			+ '<th>联系人编号</th>'
			+ '<th>联系人</th>'
			+ '<th>电话</th>'
			+ '<th>邮箱</th>'
			+ '<th>备注</th>'
			+ '</tr>'
			+ '</thead>'
			+ '<tbody id="tbody">'
			+ newRow
			+ '</tbody>'
			+ '</table>'
			+ '<div class="pagination">'
			+ '<ul>'
			+ '<li id="previousPageLi" class="disabled"><a id="previousPage" href="javascript:">&#171;上一页</a></li>'
			+ '<li id="nextPageLi"><a id="nextPage" href="javascript:">下一页&#187;</a></li>'
			+ '<li class="disabled controls">'
			+ '<a>当前<input type="text" id="pageNoOne" value="'+pageNoOne+'"/> / '
			+ '<input type="text" id="pageSizeOne" value="'+pageSizeOne+'"/>条，共<span id="countOne">'
			+ countOne + '</span> 条</a>' + '</li>' + '</ul>' + '</div>'
			+ '</div>';
			var states = {};
			states.state = {
				content : html,
				buttons : {
					'关闭' : false
				},
				submit : function(v, h, f) {
					return true;
				}
			};
			$.jBox.open(states, '供应商', 800);
	}

	//One下一页
	$("#nextPage").live(
			"click",
			function() {
				if (pageNoOne < countOne / pageSizeOne) {
					$("#tbody").html("");
					$.getJSON("${ctx}/pro/supplier/see", "pageNo="
							+ (pageNoOne + 1) + "&id=" + cId,
							function(data) {
								var newRow = "";
								$.each(data.list, function(i, info) {
									newRow =  '<tr>' 
										+ '<td>' + info.codeNum + '</td>'
										+ '<td>' + info.name + '</td>'
										+ '<td>' + info.phone + '</td>'
										+ '<td>' + info.email + '</td>';
									if(typeof(info.remarks) == "undefined"){
										newRow += '<td></td></tr>';
									}else{
										newRow += '<td>' + info.remarks + '</td></tr>';
									}

									$("#tbody").append(newRow);
								});
								pageNoOne = data.pageNo;
								pageSizeOne = data.pageSize;
								countOne = data.count;
								$("#pageNoOne").val(pageNoOne);
								$("#pageSizeOne").val(pageSizeOne);
								$("#countOne").text(countOne);
								$("#previousPageLi").attr("class", "");
								if (pageNoOne >= countOne / pageSizeOne) {
									$("#nextPageLi").attr("class", "disabled");
								}
							});
				}
			});

	//One上一页
	$("#previousPage").live(
			"click",
			function() {
				if (pageNoOne > 1) {
					$("#tbody").html("");
					$.getJSON("${ctx}/pro/supplier/see", "pageNo="
							+ (pageNoOne - 1) + "&id=" + cId,
							function(data) {
								var newRow = "";
								var code = "";
								var remarks = "";
								$.each(data.list, function(i, info) {
									newRow =  '<tr>' 
										+ '<td>' + info.codeNum + '</td>'
										+ '<td>' + info.name + '</td>'
										+ '<td>' + info.phone + '</td>'
										+ '<td>' + info.email + '</td>';
									if(typeof(info.remarks) == "undefined"){
										newRow += '<td></td></tr>';
									}else{
										newRow += '<td>' + info.remarks + '</td></tr>';
									}
									$("#tbody").append(newRow);
								});
								pageNoOne = data.pageNo;
								pageSizeOne = data.pageSize;
								countOne = data.count;
								$("#pageNoOne").val(pageNoOne);
								$("#pageSizeOne").val(pageSizeOne);
								$("#countOne").text(countOne);
								$("#nextPageLi").attr("class", "");
								if (pageNoOne <= 1) {
									$("#previousPageLi").attr("class",
											"disabled");
								}
							});
				}
			});
</script>
</head>
<body class="fixed-top">
	<div class="container" style="width: 100%;">
		<div style="margin: 20px; border: 1px solid #c8d1d5;">
			<div id="importBox" class="hide">
				<form id="importForm" action="${ctx}/pro/supplier/import"
					method="post" enctype="multipart/form-data" class="form-search"
					style="padding-left: 20px; text-align: center;"
					onsubmit="loading('正在导入，请稍等...');">
					<br /> <input id="uploadFile" name="file" type="file"
						style="width: 330px" /><br /> <br /> <input
						id="btnImportSubmit" class="btn btn-primary" type="submit"
						value="   导    入   " /> <a
						href="${ctx}/pro/supplier/import/template">下载模板</a>
				</form>
			</div>
			<div
				style="padding: 13px; background-color: #f4f4f4; border-bottom: 1px solid #c8d1d5;">
				<h4>
					<i class="icon-globe"></i> 供应商管理
				</h4>
				<ul class="ul-form" style="float: right; margin-top: -25px;">
					<li style="list-style: none">
					<shiro:hasPermission name="pro:supplier:edit">
						<a class="btn btn-primary"
							href="${ctx}/pro/supplier/form"> <i
								class="icon-pencil"></i>&nbsp;新增
						</a> <a class="btn btn-danger" href="javascript:void(0)"
							onclick="deleteData()"> <i class="icon-trash"></i>&nbsp;删除
						</a> 
					</shiro:hasPermission>
					<a class="btn btn-info" href="javascript:void(0)" id="btnImport">
							<i class="icon-upload"></i>&nbsp;导入
					</a> <a class="btn btn-info" href="javascript:void(0)" id="btnExport">
							<i class="icon-download"></i>&nbsp;导出
					</a></li>
				</ul>
			</div>
			<div style="margin: 17px;">
				<form:form id="searchForm" modelAttribute="supplier"
					action="${ctx}/pro/supplier/list" method="post"
					class="breadcrumb form-search">
					<input id="pageNo" name="pageNo" type="hidden"
						value="${page.pageNo}" />
					<input id="pageSize" name="pageSize" type="hidden"
						value="${page.pageSize}" />
					<ul class="ul-form">
					<li><label style="width: 150px;">供应商编号：</label><form:input path="codeNum"
							htmlEscape="false" maxlength="64" class="input-medium" /></li>
						<li><label>供应商名称：</label><form:input path="name"
							htmlEscape="false" maxlength="64" class="input-medium" /></li>
						<li><label>供应商类型：</label>
							<form:select path="supplierTypeCodeNum" class="input-medium">
							<form:option value="" label="全部" />
								<form:options items="${fns:getSupplierTypeList()}" itemLabel="name"
									itemValue="codeNum" htmlEscape="false" />
							</form:select>
						</li> 
						<li class="btns"><a class="btn btn-primary"
							href="javascript:void(0)" onclick="return page();"><i
								class="icon-search"></i>&nbsp;搜索</a></li>
					</ul>
				</form:form>
				<sys:message content="${message}" />
				<table id="contentTable" class="table table-hover table-bordered" style="word-wrap:break-all;word-break:break-all;">
					<thead>
						<tr>
							<th style="width: 8px;"><input type="checkbox" class="group-checkable" id="checkAll" /></th>
							<th>供应商编号</th>
							<th>供应商名称</th>
							<th>供应商类型</th>
							<th>联系电话</th>
							<th>传真</th>
							<th>邮箱</th>
							<th>地址</th>
							<th>网址</th>
							<th>备注</th>
							<shiro:hasPermission name="pro:supplier:edit"><th>操作</th></shiro:hasPermission>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${page.list}" var="info">
							<tr>
								<td style="width: 8px;"><input type="checkbox" name="id" class="group-checkable" value="${info.id}" /></td>
								<td>${info.codeNum}</td>
								<td>${info.name}</td>
								<td>${info.supplierTypeName}</td>
								<td>${info.phone}</td>
								<td>${info.fax}</td>
								<td>${info.email}</td>
								<td>${info.address}</td>
								<td>${info.website}</td>
								<td>${info.remarks}</td>
								<shiro:hasPermission name="pro:supplier:edit">
									<td><a href="${ctx}/pro/supplier/form?id=${info.id}"><i class="icon-edit"></i></a>
										<a href="${ctx}/pro/supplier/deleteData?ids=${info.id}"
										onclick="return confirmx('确认要删除该吗？', this.href)"><i class="icon-remove"></i></a> 
										<a href="javascript:" onclick="see(this)"><i class="icon-eye-open"></i></a>
										<input type="hidden" value="${info.id}"></td>
								</shiro:hasPermission>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<div class="pagination">${page}</div>
			</div>
		</div>
	</div>
</body>
</html>